<template>
  <div>
      <div class="search-lan" id="search">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button type="primary">查询</el-button>
    <!-- <el-button type="primary">添加</el-button> -->
  </div>
    <table>
      <thead>
        <th>订单ID</th>
        <th>商品名称</th>
        <th>订单状态</th>
        <th>用户名</th>
        <th>真实姓名</th>
        <th>使用时间</th>
        <th>手机号</th>
        <th>价格</th>
        <th>操作</th>
      </thead>
      <tbody v-for="(s,i) in data.data" :key="i" >
        <td>{{s.id}}</td>  
        <td>{{s.title}}</td>
        <td>待退款</td>
        <td>{{s.uname}}</td>
        <td>{{s.name}}</td>
        <td>{{s.datetime}}</td>
        <td>{{s.phone}}</td>
        <td>¥{{s.price}}</td> 
        <td>
            <button @click="gotk(s.uname,s.id)">退款</button>
        </td>

      </tbody>
    </table>
                            <el-footer>
 <el-pagination
    layout="prev, pager, next"
    :page-count="data.sumpage"
            @current-change="handleCurrentChange">
  </el-pagination>
        </el-footer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data:'',
        input:"",
         page:'1',
      }
    },
    mounted () {
    
        this.getData()
    },
    methods: {
     handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val
        console.log(this.page)
        this.getData()
      },
        getData() {
          const url = `/tp_fy?pageSize=5&&curpage=${this.page}`;
    this.axios.get(url).then((res) => {
      this.data = res.data;
      console.log(res);
          })
        },




      gotk(uname,id) {
        this.axios.post('/tytk',`uname=${uname}&&id=${id}`).then(res=>{
    if(res.data.code==200){
 this.$message({
          message: '退款成功！！！',
          type: 'success'
        });
this.getData()

    }






        })
      }
    },
  }
</script>

<style lang="scss" scoped>
#search {
    display: flex;
    margin-bottom: 20px;
}
table{
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0aa1ed;
  text-align: center;
  th,td{
  border: 1px solid #0aa1ed;
  padding: 10px 5px;
  }
button{
  background-color: #0aa1ed;
  border:  1px solid #0aa1ed;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
}
</style>